<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="code documentation and blog">
    <meta name="author" content="Brian Detering">
    <link rel="shortcut icon" href="favicon.ico">

    <title>Programming Doodles | jQuery Repeater</title>

    <link rel="stylesheet" type="text/css"
          href="http://briandetering.net//library/bootstrap-3.1.1-dist/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="http://briandetering.net//library/style.css">

</head>
<body>

<div class="container">

    <form method="POST" class="form-horizontal well" role="form">
        <fieldset>
            <legend>Cars</legend>
            <div class="repeater-default">
                <div data-repeater-list="car">
                    <div data-repeater-item>
                        <div class="form-group">
                            <label class="col-sm-1 control-label">Make</label>
                            <div class="col-sm-2">
                                <select name="make" class="form-control">
                                    <option value="volkswagon" selected>Volkswagon</option>
                                    <option value="honda">Honda</option>
                                    <option value="ford">Ford</option>
                                </select>
                            </div>

                            <label class="col-sm-1 control-label">Model</label>
                            <div class="col-sm-2">
                                <input type="text" name="model" value="Beetle" class="form-control"/>
                            </div>

                            <div class="col-sm-4">
                                <label class="checkbox-inline">
                                    <input type="checkbox" name="features" value="ac"/>
                                    Air Conditioning
                                </label>

                                <label class="checkbox-inline">
                                    <input type="checkbox" name="features" value="abs"/>
                                    Anti-Lock Brakes
                                </label>
                            </div>

                            <div class="col-sm-2">
              <span data-repeater-delete class="btn btn-danger btn-sm">
                <span class="glyphicon glyphicon-remove"></span> Delete
              </span>
                            </div>
                        </div>
                    </div>

                    <div data-repeater-item>
                        <div class="form-group">
                            <label class="col-sm-1 control-label">Make</label>
                            <div class="col-sm-2">
                                <select name="make" class="form-control">
                                    <option value="volkswagon">Volkswagon</option>
                                    <option value="honda" selected>Honda</option>
                                    <option value="ford">Ford</option>
                                </select>
                            </div>

                            <label class="col-sm-1 control-label">Model</label>
                            <div class="col-sm-2">
                                <input type="text" name="model" value="Accord" class="form-control"/>
                            </div>

                            <div class="col-sm-4">
                                <label class="checkbox-inline">
                                    <input type="checkbox" name="features" value="ac" checked/>
                                    Air Conditioning
                                </label>

                                <label class="checkbox-inline">
                                    <input type="checkbox" name="features" value="abs" checked/>
                                    Anti-Lock Brakes
                                </label>
                            </div>

                            <div class="col-sm-2">
              <span data-repeater-delete class="btn btn-danger btn-sm">
                <span class="glyphicon glyphicon-remove"></span> Delete
              </span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-1 col-sm-11">
          <span data-repeater-create class="btn btn-info btn-md">
            <span class="glyphicon glyphicon-plus"></span> Add
          </span>
                    </div>
                </div>

                <hr/>

            </div>
            <div class="form-group">
                <div class="col-sm-offset-1 col-sm-11">
                    <input type="submit" value="Submit" class="btn btn-primary btn-lg"/>
                </div>
            </div>
        </fieldset>
    </form>
    <br/>

    <script src="http://briandetering.net//library/jquery-1.11.0.js"></script>
    <script src="https://cdn.bootcss.com/jquery.repeater/1.2.1/jquery.repeater.js"></script>
    <script>
        $(document).ready(function () {


            $('.repeater-default').repeater();

        });
    </script>
</body>
</html>